<!-- 
 * 联系页面组件
 * @description 提供联系信息展示和联系表单功能
 * @author 零の守墓人
 * @version 1.0.0
 * @since 2024-01-01
 -->
<template>
    <!-- 页面根容器 -->
    <div class="contact-page">
        <!-- 统一导航栏组件 -->
        <AppHeader />

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="content-wrapper">
                <!-- 页面标题区域 -->
                <div class="page-header">
                    <h1 class="page-title">联系我们</h1>
                    <p class="page-subtitle">如果您有任何问题或建议，欢迎联系我们</p>
                </div>

                <!-- 联系信息卡片区域 -->
                <div class="contact-info">
                    <!-- 邮箱联系卡片 -->
                    <div class="contact-card">
                        <div class="contact-icon">
                            <el-icon>
                                <Message />
                            </el-icon>
                        </div>
                        <div class="contact-details">
                            <h3>邮箱</h3>
                            <p>contact@example.com</p>
                        </div>
                    </div>

                    <!-- 地址联系卡片 -->
                    <div class="contact-card">
                        <div class="contact-icon">
                            <el-icon>
                                <Location />
                            </el-icon>
                        </div>
                        <div class="contact-details">
                            <h3>地址</h3>
                            <p>北京市朝阳区</p>
                        </div>
                    </div>

                    <!-- 电话联系卡片 -->
                    <div class="contact-card">
                        <div class="contact-icon">
                            <el-icon>
                                <Phone />
                            </el-icon>
                        </div>
                        <div class="contact-details">
                            <h3>电话</h3>
                            <p>+86 138-0000-0000</p>
                        </div>
                    </div>
                </div>

                <!-- 联系表单区域 -->
                <div class="contact-form">
                    <h2>发送消息</h2>
                    <!-- Element Plus 表单组件 -->
                    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
                        <!-- 姓名输入框 -->
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入您的姓名" />
                        </el-form-item>

                        <!-- 邮箱输入框 -->
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" placeholder="请输入您的邮箱" />
                        </el-form-item>

                        <!-- 主题输入框 -->
                        <el-form-item label="主题" prop="subject">
                            <el-input v-model="form.subject" placeholder="请输入消息主题" />
                        </el-form-item>

                        <!-- 消息文本域 -->
                        <el-form-item label="消息" prop="message">
                            <el-input v-model="form.message" type="textarea" :rows="6" placeholder="请输入您的消息内容" />
                        </el-form-item>

                        <!-- 表单操作按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="submitForm" :loading="submitting">
                                发送消息
                            </el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </main>

        <!-- 统一页脚组件 -->
        <AppFooter />
    </div>
</template>

<script setup lang="ts">
/**
 * 联系页面组件逻辑
 * @description 处理联系表单的提交、验证和重置功能
 */

// ==================== 导入依赖 ====================
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Message, Location, Phone } from '@element-plus/icons-vue'
import { post, API_PATHS } from '../utils/api'
import AppHeader from '../components/AppHeader.vue'
import AppFooter from '../components/AppFooter.vue'

// ==================== 类型定义 ====================

/**
 * 联系消息接口
 * @description 定义联系消息的数据结构
 */
interface ContactMessage {
    name: string
    email: string
    subject: string
    message: string
}

// ==================== 响应式数据定义 ====================

/**
 * 表单数据对象
 * @description 存储用户输入的联系表单数据
 * @type {Object}
 */
const form = reactive({
    name: '',        // 用户姓名
    email: '',       // 用户邮箱
    subject: '',     // 消息主题
    message: ''      // 消息内容
})

/**
 * 表单验证规则
 * @description 定义每个字段的验证规则和错误提示
 * @type {Object}
 */
const rules = {
    // 姓名验证规则
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    // 邮箱验证规则
    email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ],
    // 主题验证规则
    subject: [
        { required: true, message: '请输入主题', trigger: 'blur' },
        { min: 2, max: 50, message: '主题长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    // 消息验证规则
    message: [
        { required: true, message: '请输入消息内容', trigger: 'blur' },
        { min: 10, max: 500, message: '消息长度在 10 到 500 个字符', trigger: 'blur' }
    ]
}

// ==================== 响应式引用 ====================

/**
 * 表单引用
 * @description 用于访问表单实例，进行验证和重置操作
 * @type {Ref<FormInstance>}
 */
const formRef = ref()

/**
 * 提交状态标识
 * @description 控制提交按钮的加载状态，防止重复提交
 * @type {Ref<boolean>}
 */
const submitting = ref(false)

// ==================== 方法定义 ====================

/**
 * 提交表单方法
 * @description 验证表单数据并提交联系消息
 * @async
 * @returns {Promise<void>}
 * @throws {Error} 当表单验证失败时抛出错误
 */
const submitForm = async (): Promise<void> => {
    // 检查表单引用是否存在
    if (!formRef.value) {
        console.warn('表单引用不存在')
        return
    }

    try {
        // 执行表单验证
        await formRef.value.validate()

        // 设置提交状态为加载中
        submitting.value = true

        // 调用后端API发送联系消息
        const response = await post<{ message: string }>(
            API_PATHS.CONTACT.SEND_MESSAGE,
            {
                name: form.name,
                email: form.email,
                subject: form.subject,
                message: form.message
            } as ContactMessage
        )

        // 检查API响应
        if (response.success) {
            // 显示成功消息
            ElMessage.success(response.data?.message || '消息发送成功！我们会尽快回复您。')
        } else {
            // 显示API返回的错误消息
            throw new Error(response.error || '发送失败，请稍后重试')
        }

        // 重置表单
        resetForm()

    } catch (error) {
        // 验证失败或提交失败时显示错误消息
        ElMessage.error('请检查表单信息是否正确')
        console.error('表单提交失败:', error)
    } finally {
        // 无论成功失败都要重置提交状态
        submitting.value = false
    }
}

/**
 * 重置表单方法
 * @description 清空所有表单字段，恢复到初始状态
 * @returns {void}
 */
const resetForm = (): void => {
    if (formRef.value) {
        // 使用Element Plus的表单重置方法
        formRef.value.resetFields()
        console.log('表单已重置')
    } else {
        console.warn('表单引用不存在，无法重置')
    }
}
</script>

<style scoped lang="scss">
/**
 * 联系页面样式
 * @description 导入外部样式文件，保持样式模块化
 * @note 具体样式定义在 src/assets/styles/components/_contact.scss 中
 */
@use '../assets/styles/clients/_contact';
</style>